<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .container {
            width: 850px;
            margin: 100px auto 0;
            padding: 20px;
            background: #eee;
        }

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        .cell {
            text-align: center;
            height: 40px;
            width: 90px;
            color: white;
            background: blue;
            border: 1px solid #FFFFFF;
            line-height: 40px;
            font-size: 20px;
            font-weight: 700;
            cursor: pointer;
            float: left;
        }

        .cell:hover {
            transform: scale(1.2);
            transition: all 0.5s;
        }
    </style>
</head>

<body>
    <div class="container">

    </div>
    <script>
        //找到容器
        var containerEle = document.querySelector('.container')
        //创建一个文档碎片对象
        var fragment = document.createDocumentFragment()
        for (var row = 1; row <= 9; row++) {
            //生成一个div，行盒子。
            var rowEle = document.createElement('div')
            //给该元素设置class
            rowEle.className = "row clearfix"
            for (var col = 1; col <= row; col++) {
                // 创建格子元素
                var cellEle = document.createElement('div')
                //添加class
                cellEle.classList.add('cell')
                //创建span元素
                var spanEle = document.createElement('span')
                //设置元素的自定义属性
                spanEle.dataset.value = row*col
                spanEle.dataset.exp = `${col}×${row}=${col*row}`
                //设置元素的内容
                spanEle.innerText = `${col}×${row}=${col*row}`
                //把span放到格子里面去
                cellEle.appendChild(spanEle)
                //把格子放到行盒子去
                rowEle.appendChild(cellEle)
            }
            //把行盒子放到文档碎片对象里面去，减少dom操作
            fragment.appendChild(rowEle)
        }
        containerEle.append(fragment)
        //找到所有的格子，返回一个NodeList
        var allCellEles = document.querySelectorAll('.cell')
        for(var i=0;i<allCellEles.length;i++){
            // 遍历所有格子
            var curCell = allCellEles[i]
            //给当前格子绑定鼠标指针移入事件
            curCell.addEventListener('mouseenter',function(e){
                //this代表当前触发事件的元素cell
                //找到格子里面的span
                var span = this.firstElementChild
                //获取span的自定义属性
                var res = span.dataset.value
                console.log(res)
                //把res设置span的内容
                span.innerText = res
                
            })
            //给当前格子绑定鼠标指针移出事件
            curCell.addEventListener('mouseleave',function(e){
                var span = this.firstElementChild
                var exp = span.dataset.exp
                span.innerText = exp
            })
        }

    </script>
</body>

</html>